<template>
    <div class="enterDetail">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    width="150"
                    label="商品主图">
                <template slot-scope="scope">
                    <img class="goodPic" :src="scope.row.goodsPictures[0].picture">
                </template>
            </el-table-column>
            <el-table-column
                    prop="goodsId"
                    label="商品ID">
            </el-table-column>
            <el-table-column
                    width="220"
                    prop="goodsName"
                    label="商品名">
            </el-table-column>
            <el-table-column
                    prop="goodsNum"
                    label="商品数量">
            </el-table-column>
            <el-table-column
                    prop="barCode"
                    label="条形码">
            </el-table-column>
            <el-table-column
                    prop="skuId"
                    label="SKU码">
            </el-table-column>
            <el-table-column
                    prop="skuName"
                    label="SKU名称">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    width="150"
                    prop="address"
                    label="出库数量">
                <template slot-scope="scope">
                    <el-input-number size="small" v-model="scope.row.stock"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="aptitudeForm">
            <el-form-item label="包裹编号">
                {{package.packageNo}}
            </el-form-item>
            <el-form-item label="订单号">
                {{package.orderNo}}
            </el-form-item>
            <el-form-item label="快递单号">
                {{package.expressNo}}
            </el-form-item>
            <el-form-item label="扫码出库">
                <div>
                    <el-input placeholder="请输入内容" v-model="barCode" @keyup.enter.native="getBarCodeDetail"
                              @blur="getBarCodeDetail" size="small">
                    </el-input>
                </div>
                <div v-if="detail">
                    <el-form label-width="100px" label-position="left" class="sku_detail">
                        <el-form-item label="商品名称">
                            {{detail.goodsName}}
                        </el-form-item>
                        <el-form-item label="SKU码">
                            {{detail.id}}
                        </el-form-item>
                        <el-form-item label="SKU名称">
                            {{detail.goodsSku}}
                        </el-form-item>
                        <el-form-item label="库存">
                            {{detail.stock}}
                        </el-form-item>
                        <el-form-item label="商品图片">
                            <img :src="item.picture" :preview="0" v-for="item in detail.goodsPictures">
                        </el-form-item>
                    </el-form>
                </div>
            </el-form-item>
            <el-form-item label="仓库" prop="stockId">
                <el-select v-model="ruleForm.stockId" placeholder="请选择仓库">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.stockName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="print" v-if="package.expressCompany == '海外圆通A' || package.expressCompany == '海外圆通B'">打印快递单号</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确认出库</el-button>
                <el-button @click="cancel(false)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
  import api from "@/api/orderDeliverItem.service.js";

  export default {
    data() {
      return {
        input: null,
        ruleForm: {},
        tableData: [],
        rules: {
          stockId: {required: true, message: '请选择仓库', trigger: 'change'}
        },
        barCode: null,
        options: [],
        detail: null
      };
    },

    props: {
      package: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },

    created() {
      this.getDetail()
    },

    methods: {
      getDetail() {
        api.getGoodsByPackageNo({packageNo: this.package.packageNo}).then(res => {
          this.tableData = res.values
        })
        api.storeList({pageNNo: 1, pageSize: 100}).then(res => {
          this.options = res.values
        })
      },
      print() {
        let url = `${window.location.origin}/#/print?id=${this.package.packageNo}&type=${this.package.expressCompany}`
        window.open(url)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              packageNo: this.package.packageNo,
              stockGoodVos: []
            }
            this.tableData.map(res => {
              params.stockGoodVos.push({
                barCode: res.barCode,
                orderItemId: this.package.orderItemId,
                stock: res.stock,
                stockId: this.ruleForm.stockId
              })
            })
            api.checkDeliver(params).then(res => {
              if (res.code == 200) {
                this.cancel(true)
                this.$message({
                  message: this.$t('common.operateSucccess'),
                  type: 'success'
                })
              }
            })
          }
        });
      },
      cancel(flag) {
        this.$emit('close', flag)
      },
      getBarCodeDetail() {
        let flag = false
        this.tableData.map(res => {
          if (this.barCode == res.barCode) {
            flag = true
          }
        })
        if (!flag) {
          this.$message({
            message: '条形码错误',
            type: 'error'
          })
          return false
        }
        api.getDetailByBarCode({barCode: this.barCode}).then(res => {
          this.detail = res.value;
        })
      }
    },
    watch: {
      package: {
        handler(n, o) {
          this.getDetail()
        }
      }
    }
  }

</script>
<style lang='scss' scoped>
    .enterDetail {
        .aptitudeForm {
            margin-top: 16px;
            .el-input {
                width: 240px;
            }
            .el-select {
                width: 240px;
            }
        }

        ul {
            border: 1px solid #E6E6E6;
            border-left: none;
            margin-bottom: 20px;

            li {
                height: 42px;
                display: grid;
                align-items: center;
                grid-template-columns: 50% 50%;
                font-size: 12px;
                font-weight: 400;
                border-bottom: 1px solid #F0F0F0;

                label {
                    display: inline-block;
                    width: 110px;
                    text-align: right;
                    color: #7b7b7b;
                }

                span {
                    color: #303133;
                    margin-left: 4px;
                }

                div {
                    height: 100%;
                    line-height: 42px;
                    border-left: 1px solid #f0f0f0;
                }

                &:last-of-type {
                    border: none;
                    display: inline-block;

                    label {
                        vertical-align: top;
                        line-height: initial;
                    }
                }
            }

            .pics {
                height: auto;
                div {
                    padding-top: 19px;
                }
                img {
                    width: 100px;
                    height: 75px;
                    margin-right: 12px;
                }
            }
        }
    }

    .goodPic {
        width: 100px;
        height: 100px;
    }

    .sku_detail {
        img {
            width: 75px;
            height: 75px;
            margin-right: 10px;
        }
    }

</style>
<style lang="scss">
    .aptitudeForm,
    .auditForm {
        .el-form-item__label {
            font-size: 12px !important;
        }
    }

</style>